<template>
  <common-layout title="销售合同管理">
    <template #header-buttons >
      <div class="card-header">
        <el-button type="primary" @click="handleCreate">新建销售合同</el-button>
        <el-button type="success" @click="handleBatchApproval" :disabled="selectedRowKeys.length === 0">批量审核</el-button>
        <el-button type="warning" @click="handleBatchTerminate" :disabled="selectedRowKeys.length === 0">批量终止</el-button>
      </div>
    </template>

    <template #search-form>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="合同编号" style="width: 260px;">
          <el-input v-model="searchForm.contractCode" placeholder="请输入合同编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户名称" style="width: 260px;">
          <el-input v-model="searchForm.customerName" placeholder="请输入客户名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="合同状态" style="width: 260px;">
          <el-select v-model="searchForm.status" placeholder="请选择合同状态" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="草稿" value="Draft"></el-option>
            <el-option label="已审核" value="Approved"></el-option>
            <el-option label="已生效" value="Effective"></el-option>
            <el-option label="已终止" value="Terminated"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签订日期" style="width: 300px;">
          <el-date-picker
            v-model="searchForm.signingDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </template>

    <template #data-content>
      <!-- 合同列表 -->
      <el-table
        v-loading="loading"
        :data="contractList"
        style="width: 100%"
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="contractCode" label="合同编号" width="180"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" width="180"></el-table-column>
        <el-table-column prop="totalAmount" label="合同总金额" width="150" :formatter="formatCurrency"></el-table-column>
        <el-table-column prop="signingDate" label="签订日期" width="150"></el-table-column>
        <el-table-column prop="validFrom" label="生效日期" width="150"></el-table-column>
        <el-table-column prop="validTo" label="失效日期" width="150"></el-table-column>
        <el-table-column prop="status" label="合同状态" width="120" :formatter="formatStatus"></el-table-column>
        <el-table-column prop="creator" label="创建人" width="120"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button size="small" type="primary" @click="handleEdit(scope.row)" :disabled="!canEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="success" @click="handleApproval(scope.row)" :disabled="!canApprove(scope.row)">审核</el-button>
            <el-button size="small" type="warning" @click="handleTerminate(scope.row)" :disabled="!canTerminate(scope.row)">终止</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </template>

    <!-- 查看详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="销售合同详情" width="80%" :close-on-click-modal="false">
      <div v-if="currentContract" class="contract-detail">
        <el-card class="mb-4" shadow="never">
          <template #header>
            <div class="card-header">
              <span>基本信息</span>
            </div>
          </template>
          <el-descriptions title="合同信息" :column="2" border>
            <el-descriptions-item label="合同编号">{{ currentContract.contractCode }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ currentContract.customerName }}</el-descriptions-item>
            <el-descriptions-item label="签订日期">{{ currentContract.signingDate }}</el-descriptions-item>
            <el-descriptions-item label="生效日期">{{ currentContract.validFrom }}</el-descriptions-item>
            <el-descriptions-item label="失效日期">{{ currentContract.validTo }}</el-descriptions-item>
            <el-descriptions-item label="合同状态">{{ formatStatus(currentContract) }}</el-descriptions-item>
            <el-descriptions-item label="合同总金额" :span="2">{{ formatCurrency(currentContract.totalAmount) }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ currentContract.remarks }}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-card class="mb-4" shadow="never">
          <template #header>
            <div class="card-header">
              <span>标的物明细</span>
            </div>
          </template>
          <el-table :data="currentContract.contractItems" style="width: 100%">
            <el-table-column prop="materialCode" label="物料编码" width="150" />
            <el-table-column prop="materialName" label="物料名称" width="200" />
            <el-table-column prop="specification" label="规格型号" width="150" />
            <el-table-column prop="unit" label="单位" width="100" />
            <el-table-column prop="quantity" label="数量" width="100" />
            <el-table-column prop="unitPrice" label="单价" width="100" formatter="formatCurrency" />
            <el-table-column prop="amount" label="金额" width="120" :formatter="formatCurrency" />
            <el-table-column prop="deliveryDate" label="交货日期" width="150" />
          </el-table>
        </el-card>

        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>合同条款</span>
            </div>
          </template>
          <div v-if="currentContract.terms" class="contract-terms">
            <div v-for="(term, index) in currentContract.terms" :key="index" class="term-item">
              <h4 class="term-title">{{ term.title }}</h4>
              <div class="term-content" v-html="term.content"></div>
            </div>
          </div>
          <div v-else>无合同条款信息</div>
        </el-card>
      </div>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 创建/编辑对话框 -->
    <el-dialog v-model="formDialogVisible" :title="isEdit ? '编辑销售合同' : '创建销售合同'" width="80%" :close-on-click-modal="false">
      <el-form
        ref="contractFormRef"
        :model="contractForm"
        :rules="formRules"
        label-width="120px"
        size="default"
      >
        <el-card class="mb-4" shadow="never">
          <template #header>
            <div class="card-header">
              <span>基本信息</span>
            </div>
          </template>
          <el-form-item label="合同编号" prop="contractCode">
            <el-input v-model="contractForm.contractCode" placeholder="请输入合同编号" :disabled="isEdit" />
          </el-form-item>
          <el-form-item label="客户名称" prop="customerId">
            <el-select v-model="contractForm.customerId" placeholder="请选择客户">
              <el-option v-for="customer in customerList" :key="customer.id" :label="customer.name" :value="customer.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="签订日期" prop="signingDate">
            <el-date-picker v-model="contractForm.signingDate" type="date" placeholder="请选择签订日期" />
          </el-form-item>
          <el-form-item label="生效日期" prop="validFrom">
            <el-date-picker v-model="contractForm.validFrom" type="date" placeholder="请选择生效日期" />
          </el-form-item>
          <el-form-item label="失效日期" prop="validTo">
            <el-date-picker v-model="contractForm.validTo" type="date" placeholder="请选择失效日期" />
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="contractForm.remarks" type="textarea" placeholder="请输入备注信息" rows="4" />
          </el-form-item>
        </el-card>

        <el-card class="mb-4" shadow="never">
          <template #header>
            <div class="card-header">
              <span>标的物明细</span>
              <el-button type="primary" size="small" @click="addContractItem" style="float: right">添加物料</el-button>
            </div>
          </template>
          <el-table
            v-if="contractForm.contractItems.length > 0"
            :data="contractForm.contractItems"
            style="width: 100%"
            border
          >
            <el-table-column prop="materialCode" label="物料编码" width="150">
              <template #default="scope">
                <el-select v-model="scope.row.materialId" placeholder="请选择物料">
                  <el-option v-for="material in materialList" :key="material.id" :label="`${material.code} - ${material.name}`" :value="material.id" @change="handleMaterialChange(scope.row, material.id)" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="materialName" label="物料名称" width="200" />
            <el-table-column prop="specification" label="规格型号" width="150" />
            <el-table-column prop="unit" label="单位" width="100" />
            <el-table-column prop="quantity" label="数量" width="100">
              <template #default="scope">
                <el-input v-model.number="scope.row.quantity" type="number" placeholder="请输入数量" @change="calculateAmount(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column prop="unitPrice" label="单价" width="100">
              <template #default="scope">
                <el-input v-model.number="scope.row.unitPrice" type="number" placeholder="请输入单价" @change="calculateAmount(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="金额" width="120" formatter="formatCurrency" />
            <el-table-column prop="deliveryDate" label="交货日期" width="150">
              <template #default="scope">
                <el-date-picker v-model="scope.row.deliveryDate" type="date" placeholder="请选择交货日期" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template #default="scope">
                <el-button size="small" type="danger" @click="removeContractItem(scope.index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-else class="no-data">暂无标的物明细，请点击上方"添加物料"按钮添加</div>
        </el-card>

        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>合同条款</span>
            </div>
          </template>
          <el-form-item label="条款模板" prop="termTemplateId">
            <el-select v-model="contractForm.termTemplateId" placeholder="请选择条款模板" @change="handleTermTemplateChange">
              <el-option v-for="template in termTemplateList" :key="template.id" :label="template.name" :value="template.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="条款内容" prop="termsContent">
            <el-input v-model="contractForm.termsContent" type="textarea" placeholder="请输入合同条款内容" rows="6" />
          </el-form-item>
        </el-card>
      </el-form>
      <template #footer>
        <el-button @click="formDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </template>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog v-model="approvalDialogVisible" title="合同审核" width="500px" :close-on-click-modal="false">
      <el-form :model="approvalForm" label-width="100px">
        <el-form-item label="审核结果">
          <el-radio-group v-model="approvalForm.result">
            <el-radio label="通过" />
            <el-radio label="拒绝" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input v-model="approvalForm.comment" type="textarea" placeholder="请输入审核意见" rows="4" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="approvalDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitApproval">确认审核</el-button>
      </template>
    </el-dialog>

    <!-- 终止对话框 -->
    <el-dialog v-model="terminateDialogVisible" title="合同终止" width="500px" :close-on-click-modal="false">
      <el-form :model="terminateForm" label-width="100px">
        <el-form-item label="终止原因">
          <el-input v-model="terminateForm.reason" type="textarea" placeholder="请输入终止原因" rows="4" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="terminateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitTerminate">确认终止</el-button>
      </template>
    </el-dialog>
  </common-layout>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import * as salesContractApi from '../api/salesContract';
import * as customerApi from '../api/customer';
import materialApi from '../api/material';

export default {
  name: 'SalesContract',
  components: {},
  setup() {
    // 搜索表单
    const searchForm = reactive({
      contractCode: '',
      customerName: '',
      status: '',
      signingDate: []
    });

    // 合同列表数据
    const contractList = ref([]);
    const loading = ref(false);
    const selectedRowKeys = ref([]);
    const currentContract = ref(null);

    // 分页数据
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0
    });

    // 对话框状态
    const detailDialogVisible = ref(false);
    const formDialogVisible = ref(false);
    const isEdit = ref(false);
    const approvalDialogVisible = ref(false);
    const terminateDialogVisible = ref(false);

    // 表单引用
    const contractFormRef = ref(null);

    // 表单数据
    const contractForm = reactive({
      id: '',
      contractCode: '',
      customerId: '',
      signingDate: '',
      validFrom: '',
      validTo: '',
      remarks: '',
      contractItems: [],
      termTemplateId: '',
      termsContent: ''
    });

    // 审核表单
    const approvalForm = reactive({
      result: '通过',
      comment: ''
    });

    // 终止表单
    const terminateForm = reactive({
      reason: ''
    });

    // 选择的数据列表
    const customerList = ref([]);
    const materialList = ref([]);
    const termTemplateList = ref([]);

    // 表单规则
    const formRules = {
      contractCode: [
        { required: true, message: '请输入合同编号', trigger: 'blur' }
      ],
      customerId: [
        { required: true, message: '请选择客户', trigger: 'blur' }
      ],
      signingDate: [
        { required: true, message: '请选择签订日期', trigger: 'blur' }
      ],
      validFrom: [
        { required: true, message: '请选择生效日期', trigger: 'blur' }
      ],
      validTo: [
        { required: true, message: '请选择失效日期', trigger: 'blur' }
      ]
    };

    // 格式化金额
    const formatCurrency = (row, column, cellValue) => {
      if (cellValue === undefined || cellValue === null) return '';
      return '¥' + cellValue.toFixed(2);
    };

    // 格式化状态
    const formatStatus = (row) => {
      const statusMap = {
        'Draft': '草稿',
        'Approved': '已审核',
        'Effective': '已生效',
        'Terminated': '已终止'
      };
      return statusMap[row.status] || row.status;
    };

    // 判断是否可以编辑
    const canEdit = (row) => {
      return row.status === 'Draft';
    };

    // 判断是否可以审核
    const canApprove = (row) => {
      return row.status === 'Draft';
    };

    // 判断是否可以终止
    const canTerminate = (row) => {
      return row.status === 'Approved' || row.status === 'Effective';
    };

    // 加载合同列表
    const loadContractList = async () => {
      loading.value = true;
      try {
        const params = {
          page: pagination.currentPage,
          pageSize: pagination.pageSize,
          contractCode: searchForm.contractCode,
          customerName: searchForm.customerName,
          status: searchForm.status,
          startDate: searchForm.signingDate?.[0] || '',
          endDate: searchForm.signingDate?.[1] || ''
        };

        const response = await salesContractApi.getSalesContractList(params);
        contractList.value = response.items;
        pagination.total = response.total;
      } catch (error) {
        ElMessage.error('获取销售合同列表失败');
        console.error('Failed to load sales contract list:', error);
      } finally {
        loading.value = false;
      }
    };

    // 加载客户列表
    const loadCustomerList = async () => {
      try {
        const response = await customerApi.getCustomerList({ page: 1, pageSize: 1000 });
        customerList.value = response.items;
      } catch (error) {
        ElMessage.error('获取客户列表失败');
        console.error('Failed to load customer list:', error);
      }
    };

    // 加载物料列表
    const loadMaterialList = async () => {
      try {
        const response = await materialApi.getMaterialList({ page: 1, pageSize: 1000 });
        materialList.value = response.items;
      } catch (error) {
        ElMessage.error('获取物料列表失败');
        console.error('Failed to load material list:', error);
      }
    };

    // 加载合同条款模板列表
    const loadTermTemplateList = async () => {
      try {
        const response = await salesContractApi.getTermTemplateList({});
        termTemplateList.value = response.items || [];
      } catch (error) {
        ElMessage.error('获取合同条款模板列表失败');
        console.error('Failed to load term template list:', error);
      }
    };

    // 搜索
    const handleSearch = () => {
      pagination.currentPage = 1;
      loadContractList();
    };

    // 重置搜索
    const resetSearch = () => {
      Object.keys(searchForm).forEach(key => {
        if (Array.isArray(searchForm[key])) {
          searchForm[key] = [];
        } else {
          searchForm[key] = '';
        }
      });
      pagination.currentPage = 1;
      loadContractList();
    };

    // 分页大小变更
    const handleSizeChange = (size) => {
      pagination.pageSize = size;
      loadContractList();
    };

    // 当前页变更
    const handleCurrentChange = (current) => {
      pagination.currentPage = current;
      loadContractList();
    };

    // 选择变更
    const handleSelectionChange = (selection) => {
      selectedRowKeys.value = selection.map(item => item.id);
    };

    // 查看详情
    const handleView = async (row) => {
      try {
        const response = await salesContractApi.getSalesContractDetail(row.id);
        currentContract.value = response;
        detailDialogVisible.value = true;
      } catch (error) {
        ElMessage.error('获取销售合同详情失败');
        console.error('Failed to get sales contract detail:', error);
      }
    };

    // 创建合同
    const handleCreate = () => {
      isEdit.value = false;
      // 重置表单
      contractForm.id = '';
      contractForm.contractCode = '';
      contractForm.customerId = '';
      contractForm.signingDate = '';
      contractForm.validFrom = '';
      contractForm.validTo = '';
      contractForm.remarks = '';
      contractForm.contractItems = [];
      contractForm.termTemplateId = '';
      contractForm.termsContent = '';
      formDialogVisible.value = true;
    };

    // 编辑合同
    const handleEdit = async (row) => {
      try {
        const response = await salesContractApi.getSalesContractDetail(row.id);
        contractForm.id = response.id;
        contractForm.contractCode = response.contractCode;
        contractForm.customerId = response.customerId;
        contractForm.signingDate = response.signingDate;
        contractForm.validFrom = response.validFrom;
        contractForm.validTo = response.validTo;
        contractForm.remarks = response.remarks;
        contractForm.contractItems = response.contractItems || [];
        contractForm.termTemplateId = response.termTemplateId || '';
        contractForm.termsContent = response.termsContent || '';
        isEdit.value = true;
        formDialogVisible.value = true;
      } catch (error) {
        ElMessage.error('获取销售合同详情失败');
        console.error('Failed to get sales contract detail:', error);
      }
    };

    // 提交表单
    const submitForm = async () => {
      if (!contractFormRef.value) return;

      try {
        await contractFormRef.value.validate();
        if (contractForm.contractItems.length === 0) {
          ElMessage.warning('请添加至少一个标的物明细');
          return;
        }

        const contractData = {
          ...contractForm,
          totalAmount: contractForm.contractItems.reduce((sum, item) => sum + (item.amount || 0), 0)
        };

        let response;
        if (isEdit.value) {
          response = await salesContractApi.updateSalesContract(contractForm.id, contractData);
        } else {
          response = await salesContractApi.createSalesContract(contractData);
        }

        ElMessage.success(isEdit.value ? '编辑销售合同成功' : '创建销售合同成功');
        formDialogVisible.value = false;
        loadContractList();
      } catch (error) {
        ElMessage.error(isEdit.value ? '编辑销售合同失败' : '创建销售合同失败');
        console.error(isEdit.value ? 'Failed to update sales contract:' : 'Failed to create sales contract:', error);
      }
    };

    // 添加合同项
    const addContractItem = () => {
      contractForm.contractItems.push({
        id: '',
        materialId: '',
        materialCode: '',
        materialName: '',
        specification: '',
        unit: '',
        quantity: 1,
        unitPrice: 0,
        amount: 0,
        deliveryDate: ''
      });
    };

    // 移除合同项
    const removeContractItem = (index) => {
      contractForm.contractItems.splice(index, 1);
    };

    // 处理物料变更
    const handleMaterialChange = (item, materialId) => {
      const material = materialList.value.find(m => m.id === materialId);
      if (material) {
        item.materialCode = material.code;
        item.materialName = material.name;
        item.specification = material.specification;
        item.unit = material.unit;
      }
      calculateAmount(item);
    };

    // 计算金额
    const calculateAmount = (item) => {
      item.amount = (item.quantity || 0) * (item.unitPrice || 0);
    };

    // 处理条款模板变更
    const handleTermTemplateChange = async (templateId) => {
      if (!templateId) {
        contractForm.termsContent = '';
        return;
      }

      try {
        const response = await salesContractApi.getTermTemplateDetail(templateId);
        contractForm.termsContent = response.content;
      } catch (error) {
        ElMessage.error('获取条款模板详情失败');
        console.error('Failed to get term template detail:', error);
      }
    };

    // 审核合同
    const handleApproval = (row) => {
      currentContract.value = row;
      approvalForm.result = '通过';
      approvalForm.comment = '';
      approvalDialogVisible.value = true;
    };

    // 批量审核
    const handleBatchApproval = () => {
      if (selectedRowKeys.value.length === 0) {
        ElMessage.warning('请选择要审核的合同');
        return;
      }

      ElMessageBox.confirm('确定要批量审核选中的合同吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await salesContractApi.batchApproveSalesContracts(selectedRowKeys.value, {
            result: '通过',
            comment: '批量审核通过'
          });
          ElMessage.success('批量审核成功');
          loadContractList();
          selectedRowKeys.value = [];
        } catch (error) {
          ElMessage.error('批量审核失败');
          console.error('Failed to batch approve sales contracts:', error);
        }
      }).catch(() => {
        // 取消操作
      });
    };

    // 提交审核
    const submitApproval = async () => {
      try {
        await salesContractApi.approveSalesContract(currentContract.value.id, approvalForm);
        ElMessage.success('审核成功');
        approvalDialogVisible.value = false;
        loadContractList();
      } catch (error) {
        ElMessage.error('审核失败');
        console.error('Failed to approve sales contract:', error);
      }
    };

    // 终止合同
    const handleTerminate = (row) => {
      currentContract.value = row;
      terminateForm.reason = '';
      terminateDialogVisible.value = true;
    };

    // 批量终止
    const handleBatchTerminate = () => {
      if (selectedRowKeys.value.length === 0) {
        ElMessage.warning('请选择要终止的合同');
        return;
      }

      ElMessageBox.confirm('确定要批量终止选中的合同吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await salesContractApi.batchTerminateSalesContracts(selectedRowKeys.value, {
            reason: '批量终止'
          });
          ElMessage.success('批量终止成功');
          loadContractList();
          selectedRowKeys.value = [];
        } catch (error) {
          ElMessage.error('批量终止失败');
          console.error('Failed to batch terminate sales contracts:', error);
        }
      }).catch(() => {
        // 取消操作
      });
    };

    // 提交终止
    const submitTerminate = async () => {
      if (!terminateForm.reason) {
        ElMessage.warning('请输入终止原因');
        return;
      }

      try {
        await salesContractApi.terminateSalesContract(currentContract.value.id, terminateForm);
        ElMessage.success('终止成功');
        terminateDialogVisible.value = false;
        loadContractList();
      } catch (error) {
        ElMessage.error('终止失败');
        console.error('Failed to terminate sales contract:', error);
      }
    };

    // 初始化
    onMounted(() => {
      loadContractList();
      loadCustomerList();
      loadMaterialList();
      loadTermTemplateList();
    });

    return {
      contractFormRef,
      searchForm,
      contractList,
      loading,
      selectedRowKeys,
      pagination,
      detailDialogVisible,
      formDialogVisible,
      isEdit,
      approvalDialogVisible,
      terminateDialogVisible,
      contractForm,
      approvalForm,
      terminateForm,
      customerList,
      materialList,
      termTemplateList,
      formRules,
      formatCurrency,
      formatStatus,
      canEdit,
      canApprove,
      canTerminate,
      handleSearch,
      resetSearch,
      handleSizeChange,
      handleCurrentChange,
      handleSelectionChange,
      handleView,
      handleCreate,
      handleEdit,
      submitForm,
      addContractItem,
      removeContractItem,
      handleMaterialChange,
      calculateAmount,
      handleTermTemplateChange,
      handleApproval,
      handleBatchApproval,
      submitApproval,
      handleTerminate,
      handleBatchTerminate,
      submitTerminate
    };
  }
};
</script>

<style scoped>


.pagination-container {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.contract-detail .mb-4 {
  margin-bottom: 16px !important;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.term-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.term-item:last-child {
  border-bottom: none;
}

.term-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.term-content {
  line-height: 1.6;
}

.no-data {
  text-align: center;
  padding: 20px 0;
  color: #999;
}
</style>